<template>
  <div class="container">
    <div>
      <el-carousel indicator-position="outside" height="200px">
        <el-carousel-item v-for="(item, index) in list" :key="index">
          <el-image :src="item"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-container class="box">
      <el-header>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tabs">
          <el-tab-pane label="我的可视化数据" name="first">
            <el-container class="content-container">
              <el-main class="content-box">
                <el-aside width="160px">
                  <div class="left">
                    <span>全部应用</span>
                    <span>3</span>
                  </div>
                  <div class="left">
                    <span>历史编辑</span>
                    <span>{{ oldList.length === 0 ? 0 : oldList.length }}</span>
                  </div>
                </el-aside>
                <div class="content">
                  <div class="new-projects-title">选择下面的方式进行创建</div>
                  <div class="weaper">
                    <div class="content-item" @click="noTemplate">
                      <img class="img-item" src="https://img.alicdn.com/tfs/TB1wwyKqZVl614jSZKPXXaGjpXa-300-156.png" />
                      <div class="title">PC端</div>
                    </div>
                    <div class="content-item">
                      <img class="img-item" src="https://img.alicdn.com/tfs/TB1wwyKqZVl614jSZKPXXaGjpXa-300-156.png" />
                      <div class="title">移动端</div>
                    </div>
                    <div class="content-item">
                      <img class="img-item" src="https://img.alicdn.com/tfs/TB1wwyKqZVl614jSZKPXXaGjpXa-300-156.png" />
                      <div class="title">IOS端</div>
                    </div>
                  </div>
                  <div class="project-header">
                    <div class="project-title">
                      <h2>全部应用</h2>
                      <span class="color-BCC9D4">
                        <span class="color-2483FF">10</span>个/还可创建
                        <span class="color-2483FF">{{ 10 - oldList.length }} </span>个
                      </span>
                      <div class="project-item">管理项目配额</div>
                    </div>
                  </div>
                  <div class="weaper-content">
                    <div v-for="item in oldList" :key="item.id">
                      <div class="content-item-a">
                        <img
                          class="img-item"
                          src="https://img.alicdn.com/tfs/TB1wwyKqZVl614jSZKPXXaGjpXa-300-156.png"
                        />
                        <div class="title">PC端</div>
                        <div class="file-name">
                          <span>{{item.filename}}</span>
                        </div>
                        
                        <span class="time">保存时间:{{getTime(item.lasteidit)}}</span>
                        <el-button
                          type="primary"
                          icon="el-icon-edit"
                          circle
                          class="edit"
                          @click="click(item)">
                        </el-button>
                        <el-button
                          type="danger"
                          icon="el-icon-delete"
                          circle
                          class="del"
                          @click="del(item)">
                        </el-button>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </el-main>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="我的数据" name="second">
            <el-container class="content-container">
              <el-main class="content-box">
                <el-aside width="160px">
                  <div class="left">
                    <span>全部应用</span>
                    <span>5</span>
                  </div>
                  <div class="left">
                    <span>未分组</span>
                    <span>3</span>
                  </div>
                </el-aside>
              </el-main>
            </el-container>
          </el-tab-pane>
        </el-tabs>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as api from '@/api'
import moment from 'moment'
export default {
  data() {
    return {
      activeName: 'first',
      list: [
        'https://img.alicdn.com/imgextra/i2/O1CN01w8LYwO29pBD1DUoET_!!6000000008116-2-tps-2880-600.png',
        'https://img.alicdn.com/imgextra/i2/O1CN01w8LYwO29pBD1DUoET_!!6000000008116-2-tps-2880-600.png',
        'https://img.alicdn.com/imgextra/i2/O1CN01w8LYwO29pBD1DUoET_!!6000000008116-2-tps-2880-600.png',
        'https://img.alicdn.com/imgextra/i2/O1CN01w8LYwO29pBD1DUoET_!!6000000008116-2-tps-2880-600.png',
      ],
    }
  },
  computed: {
    ...mapState('home', ['oldList']),
  },
  async created() {
    await this.getOldList()
  },
  methods: {
    ...mapActions('home', ['getOldList']),
    handleClick() {},
    noTemplate() {
      this.$store.commit('home/GET_SHOW_LIST', [])
      this.$router.push({
        name: 'homePage',
      })
    },
    click(item) {
      this.$router.push({
        name: 'homePage',
        params: {
          obj: item,
        },
      })
    },
    getTime(val) {
      return moment(val).format('YYYY/DD/MM,h:mm');
    },
    async del(item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res = await api.del(item.id)
          this.$message({
            type: res.data.message,
            message:res.data.message,
          });
          const result = await api.getAll()
          this.$store.commit('home/SET_OLD_LIST', result)
          
          console.log(result);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });    
    },
  },
}
</script>

<style scoped>
.aa {
  background-color: #fff;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #171b22;
  box-sizing: border-box;
}
.box {
  flex: 1;
  background-color: #171b22;
}
.left {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
}
.tabs {
  transition: color 0.2s;
  transition-property: color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.tab {
  height: 60px;
}
.weaper-content {
  display: flex;
  margin-top: 20px;
  flex-wrap : wrap;
  height: 290px;
  overflow:hidden;
  
}
.new-projects-title {
  height: 30px;
  font-size: 14px;
  font-weight: 700;
  color: #2681ff;
  padding: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.project-header {
  position: sticky;
  top: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #434b55;
  padding-bottom: 5px;
  padding-top: 10px;
  height: 56px;
  background: #171b22;
  z-index: 1;
  min-width: 1024px;
}
.project-header .project-title h2 {
  max-width: 200px;
  font-size: 14px;
  color: #2681ff;
  padding: 0 10px;
  border-left: 2px solid #2681ff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.project-item {
  max-width: 200px;
  font-size: 14px;
  color: #2681ff;
  padding: 0 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.project-header .project-title {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.content-container {
  margin-top: 20px;
  background-color: #171b22;
}
.el-main {
  background-color: #171b22;
}
.content-box {
  display: flex;
}
.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #171b22;
  margin: 20px;
}
.weaper {
  display: flex;
}
.el-carousel__indicators--outside {
  text-align: left;
}
.el-carousel__indicators {
  list-style: none;
}
.content-item {
  min-width: 260px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #fff;
  margin-right: 20px;
  background-color: #22272e;
  box-sizing: border-box;
}
.content-item-a {
  position: relative;
  min-width: 260px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #fff;
  margin-right: 20px;
  background-color: #22272e;
  margin-bottom: 5px;
}
.file-name{
  width: 100%;
  top: 10px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
.time{
  position: absolute;
  bottom: 10PX;
  right: 100px;
  color: #fff;
}
.edit {
  position: absolute;
  bottom: 0;
  right: 50px;

}
.del {
  position: absolute;
  bottom: 0;
  right: 0;
}
.el-carousel__indicators,
.el-carousel__indicators--horizontal,
.el-carousel__indicators--outside {
  display: none;
}
.title {
  width: 80px;
  font-size: 20px;
  color: #fff;
}
::deep .content-menu {
  width: 100%;
}
.item {
  height: 120px;
}
.el-header {
  background-color: #171b22;
}
.el-tabs__item {
  border: none;
  font-size: 20px;
  color: #fff !important;
}
.img-item {
  display: block;
  width: 160px;
  height: 100%;
  object-fit: contain;
}
.project-header .project-title .color-BCC9D4 {
  font-size: 14px;
  letter-spacing: 1px;
  color: #bcc9d4;
}
</style>